<template>
  <div
    class="p-16 rd-8 text-white"
    :style="{
      backgroundImage: `linear-gradient(to bottom right, ${startColor}, ${endColor})`,
    }"
  >
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
interface Props {
  /** 渐变开始的颜色 */
  startColor?: string;
  /** 渐变结束的颜色 */
  endColor?: string;
}

withDefaults(defineProps<Props>(), {
  startColor: "#56cdf3",
  endColor: "#719de3",
});
</script>

<style scoped></style>
